{{ define "js" }}
  <script>
    function drawCallback() {
      formatTimestamps()
      $('[data-toggle="tooltip"]').tooltip()
    }

    {{ if .PagingToken }}
      setupInfiniteScroll({{.PagingToken}},'transactions-table', 'transactions-table-inf-scroll', 'transacions')
    {{ end }}

    function setupInfiniteScroll(pageToken, tableID, loadingID, urlPart) {
      var previousToken = ""
      var isLoading = false

      const infLoading = document.getElementById(loadingID)
      const getTransactions = async (token) => {
        try {
          const res = await fetch(`${window.location.pathname}/data?pageToken=${encodeURI(token)}`)
          const data = await res.json()

          console.log('got data: ', data)

          if (data && data.data && data.pagingToken && data.pagingToken.length) {
            previousToken = pageToken
            pageToken = data.pagingToken
            console.log('setting new pagetoken:\n',"new:", pageToken,'\n',"pre:", previousToken)

            if (data.data.length < 1) {
              if (infLoading) {
                let v = infLoading.querySelector('span')
                if (v) {
                  infLoading.querySelector('span').innerText = 'No more data, here is the end.'
                }
              }
            }
            for (let i = 0; i < data.data.length; i++) {
              const row = data.data[i];
              for (let j = 0; j < data.data[i].length; j++) {
                const col = data.data[i][j]
                const innerElement = document.createElement('div')
                {
                  innerElement.classList.add('tbl-col-content')
                  innerElement.innerHTML = col
                }
                const el = document.createElement('div')
                {
                  el.classList.add('tbl-col')
                  el.appendChild(innerElement)
                }
                infLoading.insertAdjacentElement("beforebegin", el)
              }
            }
            drawCallback()
          } else if (data && data.data && data.data.length == 0) {
            if (infLoading) {
              let v = infLoading.querySelector('h5')
              if (v) {
                infLoading.querySelector('h5').innerText = 'No entries found.'
              }
            }
          }
        } catch (err) {
          console.error("error getting transactions: ", err)

          if (infLoading) {
            let v = infLoading.querySelector('h5')
            if (v) {
              infLoading.querySelector('h5').innerText = 'Something went wrong fetching please try again another time.'
            }
          }
        }
        isLoading = false
      }

      let optionsScroll = {
        root: document.getElementById(tableID),
        rootMargin: '5px',
        threshold: 0
      }

      const handleTableEnd = (entries, observer) => {
        for (let i = 0; i < entries.length; i++) {
          const entry = entries[i];
          if (entry.isIntersecting) {
            console.log('intersecting');
            if(!isLoading) {
              console.log(tableID,'token:', pageToken)
              isLoading = true
              getTransactions(pageToken)
            }
          }
        }
      }

      let observerScroll = new IntersectionObserver(handleTableEnd, optionsScroll)

      let transactionsLastElement = document.getElementById(loadingID)
      if (!!transactionsLastElement) {
        observerScroll.observe(transactionsLastElement)
      }
    }
  </script>
{{ end }}{{ define "css" }}
  <style>
    .cellpadding {
      padding: 0.5rem 0.6rem !important;
    }

    .border-bottom-radius-0 {
      border-bottom-left-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
    }
  </style>
  <style>
    .dataTables_scrollBody {
      height: 100%;
    }
    .badge {
      border-radius: 0.8rem;
      padding: 0.4rem;
      font-weight: 500;
    }

    .token-icon {
      width: fit-content;
      padding: 0 0.15rem;
      display: flex;
      align-items: center;
    }
    .nav-item {
      margin: 0;
    }

    .header-col,
    .overview-header-col {
      background-color: var(--bg-color-light);
      font-style: normal;
      /* font-family: 'Mukta'; */
      font-weight: 500;
      font-size: 1rem;
      line-height: 23px;
      backdrop-filter: blur(2px);
    }

    .token-holdings {
    }

    .token-balance-col {
      /* border-bottom: 1px solid var(--shadow-light); */
      border-top: 1px solid var(--border-color);
      padding: 0.5rem 1rem;
    }

    /* .token-balance-col:nth-child(2n+2) {
    text-align: right;
  } */

    .token-balance-col:nth-child(1),
    .token-balance-col:nth-child(2) {
      border-top: none;
    }

    /* #transactions-table div {
    --ease-elastic-1:cubic-bezier(.5,.75,.75,1.25);
    --ease-elastic-2: cubic-bezier(.5,1,.75,1.25);
    --ease-elastic-3: cubic-bezier(.5,1.25,.75,1.25);
    aspect-ratio: 1;
    transform: scaleX(calc(0.85 + (var(--shown, 1) * 0.15)));
    transition: all 0.3s var(--ease-elastic-1);
  } */

    .overview-col {
      border-top: 1px solid var(--border-color);
      padding: 1rem;
    }

    .overview-col:nth-child(1),
    .overview-col:nth-child(2) {
      border-top: none;
    }

    /* .overview-col:last-child,
  .overview-col:nth-last-child(2) {
    border-bottom: none;
  } */

    .overview-label,
    .overview-col,
    .token-balance-col {
      font-weight: 400;
      font-size: 0.85rem;
      line-height: 23px;
      font-style: normal;
      /* font-family: 'Mukta'; */
    }
    @media screen and (min-width: 820px) {
      .overview-label,
      .overview-col,
      .token-balance-col {
        font-size: 1rem;
        font-weight: 300;
      }
    }

    .header-address {
      font-size: 1.2rem;
    }

    .header-address .text-monospace {
      font-size: 0.81rem;
    }

    .qrcode-light {
      visibility: hidden;
    }

    .border-top {
      border-color: var(--border-color) !important;
    }

    @media screen and (min-width: 600px) {
      .header-address,
      .header-address .text-monospace,
      .fa-copy {
        font-size: 1.2rem;
      }
    }

    [data-theme="dark"] .qrcode-light {
      display: none;
    }
    [data-theme="dark"] .qrcode-dark {
      display: inline-block !important;
      visibility: visible !important;
    }

    [data-theme="light"] .qrcode-dark {
      display: none;
    }

    [data-theme="light"] .qrcode-light {
      display: inline-block !important;
      visibility: visible !important;
    }

    .token-icon {
      min-width: 120px;
    }
    .token-holdings {
      min-width: 120px;
    }

    /* .overview-tab-initial {
    display: none !important;
  }

  @media screen and (min-width: 820px) {
    .overview-tab-initial {
      display: flex !important;
    }
    #overviewTab {
      display: none !important;

    }
    #overviewTab-tab {
      display: none !important;
    } 
  } */

    .tbl-col {
      padding: 0.5rem;
      border-top: var(--border-color) 1px solid;
    }

    .tbl-col-content {
      max-width: 210px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .token-balance-col {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* #erc721Txns .tbl-col, #erc721Txns .header-col {
    max-width: 250px;
  } */
    .nav-link.dropdown-toggle::after {
      float: none !important;
    }
  </style>
{{ end }}{{ define "content" }}
  <div class="container mt-2">
    <div class="my-3">
      <div class="d-md-flex py-2 justify-content-md-between">
        <h1 class="h4 mb-1 mb-md-0">
          <span class="ml-1 mr-1"><i class="fas fa-cube mr-2"></i>Transactions</span>
        </h1>
        <nav class="d-flex flex-wrap-reverse flex-md-nowrap justify-content-center align-items-center" aria-label="breadcrumb">
          <ol style="white-space: nowrap;padding:0; background-color:transparent;" class="breadcrumb font-size-1 flex-nowrap mb-0" style="padding:0; background-color:transparent;">
            <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Transactions</li>
          </ol>
        </nav>
      </div>
    </div>
    <div id="r-banner" info="{{ .Meta.Templates }}"></div>
    <div class="card shadow-none flex-grow-1">
      <div class="card-body px-0 py-0">
        <div style="height: 800px;" class="tab-content" id="address-tab-content">
          <div class="tab-pane fade show active" id="transactions" role="tabpanel" aria-labelledby="transaction-tab">
            <div id="transactions-table" style="display: grid; grid-template-columns: repeat(8, auto); max-height: 800px; overflow: auto;">
              <div style="z-index: 98; top: 0;" class="h5 mb-0 cellpadding header-col position-sticky"><span>Tx Hash</span></div>
              <div style="z-index: 98; top: 0;" class="h5 mb-0 cellpadding header-col position-sticky"><span>Method</span></div>
              <div style="z-index: 98; top: 0;" class="h5 mb-0 cellpadding header-col position-sticky"><span>Block</span></div>
              <div style="z-index: 98; top: 0;" class="h5 mb-0 cellpadding header-col position-sticky"><span>Time</span></div>
              <div style="z-index: 98; top: 0;" class="h5 mb-0 cellpadding header-col position-sticky"><span>From</span></div>
              <div style="z-index: 98; top: 0;" class="h5 mb-0 cellpadding header-col position-sticky"><span>To</span></div>
              <div style="z-index: 98; top: 0;" class="h5 mb-0 cellpadding header-col position-sticky"><span>Value</span></div>
              <div style="z-index: 98; top: 0;" class="h5 mb-0 cellpadding header-col position-sticky"><span>Tx Fee</span></div>
              {{ if len .Data.Data }}
                {{ range $i, $row := .Data.Data }}
                  {{ range $j, $col := $row }}
                    <div class="tbl-col">
                      <div class="tbl-col-content">{{ $col }}</div>
                    </div>
                  {{ end }}
                {{ end }}
                <div style="grid-column: 1 / 8;" id="transactions-table-inf-scroll" class="d-flex justify-content-center p-2">
                  <span style="color: grey;">loading...</span>
                </div>
              {{ else }}
                <div style="grid-column: 1 / 8;" id="transactions-table-inf-scroll" class="d-flex justify-content-center p-2">
                  <div class="d-flex justify-content-center align-items-center flex-column">
                    <div>
                      <h5 style="color: grey;">No entries found.</h5>
                    </div>
                  </div>
                </div>
              {{ end }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{{ end }}
